<template>
  <!-- 资金记录 -->
  <div class="information-content-h5">
    <h1 class="information-content-h5__title">
      <h3 @click="goBack"><i-teenyicons-arrow-left-solid /> {{ title }}</h3>
    </h1>
    <div class="search-box__h5-input">
      <ElInput :prefix-icon="Search" v-model="input" :placeholder="t('home.InputPlaceholder')" class="zee-form-height-40" @input="inputSearch" @blur="inputSearch"/>
    </div>
    <ul class="search-box__h5">
      <li v-for="item in list" :key="item.id">
        <div class="search-h5-img">
          <img v-zlazy="item.imgPlay" alt="">
        </div>
        <dl>
          <dt>{{ item.gameName }}</dt>
          <dd>
            <h4>RTP: <span>{{ item.gameRtp }}</span> <em>{{ item.gameChannelName }}</em> </h4>
            <div class="open-game" @click="gotoPlay(item)">{{ t('REDBUG.OpenNow') }}</div>
          </dd>
        </dl>
      </li>
    </ul>
  </div>
  <TipsRecharge v-model:visible="showTipsRecharge" @button-click="goBack"/>
</template>

<script setup lang="ts" name="HeaderSearchH5">
import recordApi from '@/api/modules/record';
import userinfo from '@/store/userinfo';
import { getEnumValue, getEnumOptions } from '@/utils/enums';
import { parseTime } from '@/utils/format';
import { Search } from '@element-plus/icons-vue';
import { throttle } from '@/utils/format';
import gamesApi from '@/api/modules/games';
import system from '@/store/system';
import nocache from '@/store/nocache';
import { debug } from 'console';
const currentWallet: any = computed(()=> piniaUserinfo.getCurrentWallet);

const route = useRoute();
const router = useRouter();
const { t } = useI18n();
const emits = defineEmits(['back']);
const piniaSystem:any = system();
const piniaUserinfo:any = userinfo();
const piniaNocache:any = nocache();
const props = defineProps({
  title: {
    type: String,
    default: ""
  }
});

const startDate = parseTime(new Date().getTime() - 3600 * 1000 * 24 * 7, 'dateobject');
const endDate = parseTime(new Date(), 'dateobject');

const data:any = reactive({
  input: '',
  list: [],
  loading: false,
  showTipsRecharge: false,
});

const {
  input,
  list,
  loading,
  showTipsRecharge,
} = toRefs(data);


const inputSearch = throttle(()=>{
  if(input.value !== ""){
    findAllGameByName();
  }else{
    list.value = [];
  }
}, .5);

const findAllGameByName = () => {
  loading.value = true;
  gamesApi.findAllGameByName({
    name: input.value,
    languageType: piniaSystem.getLang.code
  }).then((response:any)=>{
    console.log('搜索结果', response);
    if(response.code === 200){
      list.value = (response.data.hallGame || []).map((item:any) => {
        return {
          ...item,
          gameName: item.languageChildren[0] && item.languageChildren[0].languageName
        }
      });
    }
  }).finally(()=>{
    loading.value = false;
  })
}

const gotoPlay = (game:any) => {
  if(piniaUserinfo.getHaslogged){
    // 已经登录
    if(game.gameId && game.gameId.trim()){
      const data = {
        playId: game.playId,
        imgPlay: game.imgPlay,
        gameName: game.gameName,
        fromPath: route.fullPath,
      }
      if(currentWallet.value.money > 0){
        router.replace({
          path: '/playbox',
          query: data
        });
      }else{
        showTipsRecharge.value = true;
      }
    }
  }else{
    // 未登录
    piniaNocache.openLogin();
  }
}


const goBack = () => {
  emits('back');
}
</script>

<style lang="scss" scoped>
@import url(./index.scss);
.search-box__h5-input{
  height: var(--rem-60);
  display: flex;
  align-items: center;
  margin: 0 var(--rem-20);
}
.search-box__h5{
  li{
    display: flex;
    align-items: center;
    margin: var(--rem-20) var(--rem-20) 0;
    .search-h5-img{
      img{
        width: var(--rem-80);
        height: var(--rem-80);
        border-radius: var(--rem-10);
      }
      margin-right: var(--rem-20);
    }
    dl{
      width: 70%;
      dt{
        font-weight: 600;
        color: var(--z-font-anti);
      }
      dd{
        display: flex;
        align-items: center;
        margin-top: var(--rem-7);
        h4{
          font-size: var(--rem-12);
          span{
            color: var(--bg-pbtn);
          }
          em{
            font-style: normal;
            display: block;
          }
        }
        .open-game{
          margin-left: auto;
          padding: var(--rem-5) var(--rem-15);
          border-radius: var(--rem-20);
          background-color: var(--border-color);
          border: 2px solid var(--border-prm);
        }
      }
    }
  }
}
</style>
